<template>
    <div>
        <van-nav-bar title="订单列表" />
        <van-tabs v-model:active="active">
            <van-tab title="全部">
                  <van-swipe-cell>
                 <div class="djs" v-show="js">
                    <span>2024-06-18 15:04:26</span>
                    <span>29分{{ time }}秒</span>
                    <span>待付款</span>
                </div>
               
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题" class="goods-card"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题" class="goods-card"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                     
                <van-card num="2" price="2.00" desc="描述信息" title="商品标题" class="goods-card"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />

            </van-swipe-cell>

               
            </van-tab>
          
            <van-tab title="待付款">内容 2</van-tab>
            <van-tab title="待发货">内容 3</van-tab>
            <van-tab title="待收货">内容 4</van-tab>
            <van-tab title="已完成">内容 4</van-tab>
            <van-tab title="已取消">内容 4</van-tab>
        </van-tabs>



    </div>
</template>

<script setup>
import { ref } from 'vue';
let time = ref(30)
let timer;
let js = ref(true)
timer = setInterval(() => {
    time.value--
    if (time.value == 0) {
        clearInterval(timer)
        js.value = false
    }
}, 1000)

</script>

<style lang="scss" scoped>
.djs {
    span {
        margin-left: 25px;
    }
}
</style>